<template>
    <div class="gywm">
        <div class="gywm-content-box4">
            <div class="lxwm-content">
                <div class="lxwm-content-left">
                    <span>联系表格--华胜讯科技</span>
                </div>
                <div class="lxwm-form">
                    <!-- 表单 -->
                    <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-form-item label="姓名" prop="name">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="18">
                                <el-form-item label="公司" prop="company">
                                    <el-input v-model="form.company"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="18">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="form.email"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="18">
                                <el-form-item label="电话" prop="phone">
                                    <el-input v-model="form.phone"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="您的需求" prop="needs">
                            <el-checkbox-group v-model="form.needs">
                                <el-checkbox label="多语言讲解系统"></el-checkbox>
                                <el-checkbox label="车载娱乐系统"></el-checkbox>
                                <el-checkbox label="智能公交报站器"></el-checkbox>
                                <el-checkbox label="导览机租赁系统"></el-checkbox>
                                <el-checkbox label="LED显示屏"></el-checkbox>
                                <el-checkbox label="耳机"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="留言" prop="message">
                            <el-input type="textarea" v-model="form.message"></el-input>
                            <el-text class="mx-1" size="small">*提交此表格,即同意将详细信息用于联系目的。</el-text>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="submitForm">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="lxwm-content-left">
                    <span>联系方式--华胜讯科技</span>
                </div>
                <div class="lxwm-tel-box">
                    <div class="lxwm-tel">
                        <div class="lxwm-tel-left">
                            <span>电话：</span>
                        </div>
                        <div class="lxwm-tel-right">
                            <span>+86 182 0755 8018</span>
                        </div>
                    </div>
                    <div class="lxwm-tel">
                        <div class="lxwm-tel-left">
                            <span>邮箱：</span>
                        </div>
                        <div class="lxwm-tel-right">
                            <span>Sandy@tamotec.com</span>
                        </div>
                    </div>
                    <div class="lxwm-tel">
                        <div class="lxwm-tel-left">
                            <span>传真：</span>
                        </div>
                        <div class="lxwm-tel-right">
                            <span>+86-755-29030953</span>
                        </div>
                    </div>
                    <div class="lxwm-tel">
                        <div class="lxwm-tel-left">
                            <span>技术支持：</span>
                        </div>
                        <div class="lxwm-tel-right">
                            <span>chen@tamotec.com</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted, reactive } from 'vue'
import { ElNotification } from 'element-plus'
import { getGywmList, addIntention } from '@/api/rjxt'

const form = reactive({
    name: '',
    company: '',
    email: '',
    phone: '',
    needs: [],
    message: ''
});

const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    company: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
    needs: [{ type: 'array', required: true, message: '请选择至少一项需求', trigger: 'change' }],
    message: [{ required: true, message: '请输入留言', trigger: 'blur' }]
};

const formRef = ref(null);

const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            addIntention({
                ...form
            }).then(res => {
                if (res.status === 200) {
                    ElNotification({
                        title: 'Success',
                        message: '提交成功',
                        type: 'success',
                    })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '提交失败',
                        type: 'error',
                    })
                }
                formRef.value.resetFields();
            })
        } else {
            console.log('Form validation failed');
            return false;
        }
    });
};

const rjxtList = ref([])
const imgArr = ref([])
const imgArr1 = ref([])
const imgArr2 = ref([])
const imgArr3 = ref([])
const imgArr4 = ref([])
const imgArr5 = ref([])

onMounted(() => {
    getGywmList().then(res => {
        rjxtList.value = res.data

        imgArr.value = rjxtList.value.filter(item => item.position === 'content')
        imgArr1.value = rjxtList.value.filter(item => item.position === 'content_01')
        imgArr2.value = rjxtList.value.filter(item => item.position === 'content_02')
        imgArr3.value = rjxtList.value.filter(item => item.position === 'content_03')
        imgArr4.value = rjxtList.value.filter(item => item.position === 'content_04')
        imgArr5.value = rjxtList.value.filter(item => item.position === 'content_05')
    })
})
</script>

<style scoped>
/* 媒体查询 手机 */
@media (max-width: 768px) {
    .lxwm-form {
        padding: 20px auto;
    }

    .el-form {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-input,
    .el-checkbox-group {
        width: 100%;
    }

    .el-button {
        display: block;
        margin: 0 auto;
    }

    .lxwm-tel {
        display: flex;
        margin: 15px auto;
    }

    .lxwm-tel-box {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        width: 100%;
        justify-content: flex-start;
    }

    .lxwm-content-left {
        margin: 20px auto;

        span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333;
            padding: 0 20px;
        }
    }

    .lxwm-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 220px;
    }
}

/* 媒体查询 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .gywm {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        height: auto;
        margin-top: 130px;
    }

    .gywm-content-box4 {
        width: 800px;
        padding: 0 20px;
    }

    .lxwm-form {
        padding: 20px auto;
        margin-top: 12px;
    }

    .el-form-item {
        margin-bottom: 18px;
    }

    .lxwm-tel {
        display: flex;
        margin-left: 116px;
        margin-top: 30px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .lxwm-tel-box {
        width: 800px;
        margin-left: -78px;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 30px;
    }

    .lxwm-content-left  {
        margin: 20px auto;
        span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
    }
}

/* 媒体查询 电脑 */
@media (min-width: 1024px) {
    .gywm {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        height: 1280px;
        margin-top: -142px;
    }

    .lxwm-form {
        padding: 20px auto;
        margin-left: 10%;
        margin-top: 15px;
    }

    .el-form-item {
        margin-bottom: 20px;
    }

    .el-input,
    .el-checkbox-group {
        width: 100%;
    }

    .el-button {
        display: block;
        margin: 0 auto;
    }

    .lxwm-tel {
        display: flex;
        margin-left: 200px;
        margin-top: 50px;
    }

    .lxwm-tel-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        width: 1200px;
        justify-content: flex-start;
    }

    .lxwm-content-left {
        margin: 20px auto;

        span {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333;
        }
    }

    .lxwm-content {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
    }

    .demo-form-inline .el-input {
        --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
        --el-select-width: 220px;
    }

    .gywm-content-box4 {
        margin-top: -100px;
    }
}
</style>
